<template>
    <div class="mytabs-container">
        <el-button :disabled="disabled" type="primary" size="mini" @click="dialogVisible=true;isEdit=true">{{ sel=== 'many' ? '添加参数' : '添加属性'}}</el-button>
        <el-table border :data="list" style="width: 100%;margin-top: 20px;">
            <el-table-column type="expand" width="50">
                <template slot-scope="scope">
                    <span v-if="scope.row.attr_vals">
                        <el-tag :key="tag" v-for="(tag, index) in scope.row.attr_vals.split(' ')" closable
                            :disable-transitions="false" @close="$emit('handleClose', index, scope.row)">
                            {{ tag }}
                        </el-tag>
                    </span>

                    <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small"
                        @keyup.enter.native="$emit('handleInputConfirm',scope.row)" @blur="$emit('handleInputConfirm',scope.row)">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="$emit('showInput',scope.row)">+ New Tag</el-button>
                    {{ scope.row.inputVisible }}
                </template>

            </el-table-column>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column prop="attr_name" label="参数名称" width="800">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{row}">
                <slot :row="row"></slot>
              </template>

            </el-table-column>
        </el-table>
        <!-- 弹框 -->
        <el-dialog
            :title="isEdit ? `添加${sel==='many' ? '动态参数' : '静态属性'}` : `编辑${sel==='many' ? '动态参数' : '静态属性'}`"
            :visible.sync="dialogVisible"
            width="50%"
            @close="handleClose">
            <el-form :model="formData" :rules="rules"  label-width="120px">
              <el-form-item :label="sel==='many' ? '动态参数' : '静态属性'" prop="attr_name">
                <el-input v-model="formData.attr_name"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
              <el-button type="primary" @click="doClick" size="medium">确 定</el-button>
            </span>
          </el-dialog>
    </div>
</template>

<script>
import { addCategories, putAttributes } from '@/api/goods'
export default {
  name: 'ShoppingMyTabs',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    sel: {
      type: String,
      default: 'many'
    }
  },
  data () {
    return {
      tableData: [],
      dialogVisible: false,
      formData: {
        attr_name: '',
        attr_sel: 'many'
      },
      disabled: true,
      isEdit: false,
      rules: {
        attr_name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  updated () {
    // console.log(this.disabled, 'dis')
  },
  methods: {
    doClick () {
      this.dialogVisible = false
      this.isEdit ? this.addParams() : this.editParams()
    },
    async addParams () {
      this.formData.cat_id = this.list[0].cat_id
      const res = await addCategories(this.formData)
      this.$emit('addParams', res.data)
    },
    async editParams () {
      const res = await putAttributes(this.formData)
      // console.log(res, '---------')
      this.$emit('editParams', res.data)
    },
    handleClose () {
      // console.log(111111111111)
      this.formData = {
        attr_name: '',
        attr_sel: 'many'
      }
    },
    // 父亲调用 aaa input 聚焦
    aaa () {
      console.log(this.list, '-----')
      this.$nextTick(() => {
        console.log(this.$refs.saveTagInput, '--------')
        this.$refs.saveTagInput.focus()
      })
    }
  }
  // watch: {
  //   disabled (newV, oldV) {
  //     console.log('新值:', newV, '旧值:', oldV)
  //   }
  // }
}
</script>

<style lang="less" scoped>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>
